<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition</title>
    <script src="../js/vue.min.js"></script>

</head>
<body>
<script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="animated-number-demo">
    <input v-model="showdata" type="number" step="20">
    <p>{{showdata}}</p>
    <p>{{ animatedNumber }}</p>
</div>
<script>
    new Vue({
        el: '#animated-number-demo',
        data: {
            showdata: 0,
            animatedNumber: 0
        },
        watch: {
            showdata: function(newValue, oldValue) {
                var vm = this
                function animate (time) {
                    requestAnimationFrame(animate)
                    TWEEN.update(time)
                }
                new TWEEN.Tween({ tweeningNumber: oldValue })
                        .easing(TWEEN.Easing.Quadratic.Out)
                        .to({ tweeningNumber: newValue }, 500)
                        .onUpdate(function () {
                            vm.animatedNumber = this.tweeningNumber.toFixed(0)
                        })
                        .start()
                animate()
            }
        }
    })
</script>
</body>
</html>
